<template>
	<div class="user_follow">
		<!-- 头部导航栏 -->
		<van-nav-bar title="我的关注" left-text="返回" left-arrow @click-left="$router.back()">
		</van-nav-bar>
		
		<!-- 关注列表 -->
		<div class="list">
			<div class="item" v-for="item in followList" :key="item.id">
				<van-image round fit="cover" class="follow_avator" :src="item.head_img | imgUrl"></van-image>
				<div class="info">
					<span class="followName">{{item.nickname}}</span>
					<span class="followDate">{{item.create_date | formatDate}}</span>
				</div>
				<div class="btn" @click="followFN(item)" :class="{unfollow: !item.has_follow}">{{item.has_follow ? '取消关注' : '关注'}}</div>
			</div>
		</div>
		<van-empty description="暂无关注" v-if="!followList.length"/>
	</div>
</template>

<script>
	import { fllowListApi , userFllowApi , userunFllowApi } from '../apis/user.js'
	export default {
		data (){
			return {
				followList: []
			}
		},
		
		async created (){
			const res = await fllowListApi();
				this.followList = res.data.data.map(item => {
					return {...item , has_follow: true}
				});
		},
		
		methods: {
			async followFN (item){
				if(item.has_follow){
					await userunFllowApi(item.id)
					.then(res=> {
						console.log(res)
						
					})
				}else{
					await userFllowApi(item.id)
					.then(res => {
						console.log(res)
					})
				}
				item.has_follow = !item.has_follow;
			}
		}
	}
</script>

<style lang="less" scoped>
	.user_follow{
		
		.list{
			
			.item{
				height: 80px;
				background-color: #dcdcdc;
				border-bottom: 1px solid #aaaaaa;
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 0px 10px;
				.follow_avator{
					height: 65px;
					width: 65px;
					margin-left: 10px;
				}
				
				.info{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: left;
					width: 50%;
					height: 100%;
					margin-left: 20px;
					.followName{
						font-size: 17px;
						font-weight: bold;
						margin-bottom: 10px;
					}
					
					.followDate{
						color: #777777;
						font-size: 14px;
					}
				}
			
				.btn{
					background-color: #999999;
					width: 80px;
					height: 25px;
					color: #ffffff;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 13px;
					font-size: 13px;
				}
				
				.unfollow{
					background-color: #ff3100;
				}
			}
		}
	}
</style>
